import React, { useReducer } from 'react'
import { defaultState, reducer } from './reducer'
import Other from './Other'

export default function Index() {
  // hooks一般在组件的头部引用
  const [state, dispatch] = useReducer(reducer, defaultState)

  const change = () => {
    dispatch({
      type: 'change',
      color: 'blue'
    })
  }

  return (
    <div style={{color: state.color}}>
      hello
      <button onClick={change}>change color</button>
      <Other></Other>
    </div>
  )
}
